<template>
	<view class="container">
		<view class="card" v-for="(item, index) in cards" :key="index" @click="redirectToMain(index)">
			<view class="card-content">
				<view class="card-title-box">
					<view class="card-title">{{ item.title }}</view>
					<view class="card-description">{{ item.description }}</view>
				</view>
				<uni-icons type="right" :size="40"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const cards = [
		{
			title: '站房调试',
			description: ''
		},
		{

			title: '站房验收',
			description: '正在建设中，敬请期待'
		},
		{

			title: '站房运维',
			description: '正在建设中，敬请期待'
		}
	]

	const redirectToMain = (index) => {
		if (index === 0) {
			uni.switchTab({
				url: '/pages/stationManage/stationManage'
			})
		}
		if (index === 1) {
			uni.showModal({
				title: '提示',
				content: '站房验收正在建设中，敬请期待！',
				confirmText: "确定",
				showCancel: false,
			})
		}
		if (index === 2) {
			uni.showModal({
				title: '提示',
				content: '站房运维正在建设中，敬请期待！',
				confirmText: "确定",
				showCancel: false,
			})
		}
	}
</script>

<style>
	.container {
		background-image: url('../../static/login-bcg.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		/* 子元素垂直排列 */
		align-items: center;
		justify-content: center;
		height: 92vh;
		width: 100%;
		text-align: center;
	}

	.card {
		width: 400px;
		/* height: 100px; */
		margin-bottom: 40px;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		background-color: #F4FBFA;
		/* 		background-color: #f3fbfb; */
		padding: 20px 10px;
	}

	.card2 {
		width: 400px;
		/* height: 100px; */
		margin-bottom: 40px;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		background-color: #F7F7F7;
		/* 		background-color: #f3fbfb; */
		padding: 20px 10px;
	}


	.card-content {

		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.card-title-box {
		/* border: 1px solid red; */
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.card-description {
		font-size: 20px;
		color: #666;
	}
</style>